<!-- author: lifeng -->
<!-- time: 2021-03-17 15:28:07 -->
<!-- name: 材料/附件消耗统计 -->

<template>
  <div class="out-div">
    <el-row class="select-row">
      <el-form
        :model="filterOptions"
        :rules="filterOptionsRules"
        ref="filterOptions"
        inline
        label-width="80px"
      >
        <el-form-item
          :label="formLabels.workCompany"
          prop="workCompany"
          style="width: 380px"
        >
          <el-select
            v-model="filterOptions.workCompany"
            @change="changeWorkCompany()"
            :style="selectStyle"
            clearable
          >
            <el-option
              v-for="item in workCompanyOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.area" prop="area" style="width: 380px">
          <el-select
            v-model="filterOptions.area"
            @change="changeArea()"
            :style="selectStyle"
            clearable
          >
            <el-option
              v-for="item in areaOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="formLabels.block"
          prop="block"
          style="width: 380px"
        >
          <el-select
            v-model="filterOptions.block"
            :style="selectStyle"
            @change="changeBlock()"
            clearable
          >
            <el-option
              v-for="item in blockOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.oilField" style="width: 380px">
          <el-select
            v-model="filterOptions.oilField"
            :style="selectStyle"
            clearable
          >
            <el-option
              v-for="item in oilFieldOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.wellSpacing" style="width: 380px">
          <el-select
            v-model="filterOptions.wellSpacing"
            clearable
            :style="selectStyle"
          >
            <el-option
              v-for="item in wellSpacingOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.workDate" style="width: 380px">
          <!-- <el-date-picker
              v-model="defaultWorkDate"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="—"
              style="width:240px"
            /> -->
          <el-date-picker
            v-model="startDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            style="width: 135px"
          />
          —
          <el-date-picker
            v-model="endDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            style="width: 135px"
          />
        </el-form-item>
        <el-form-item label=" ">
          <el-button
            class="top-btn"
            type="primary"
            @click="getTableData('filterOptions')"
            >查询数据</el-button
          >
        </el-form-item>
        <el-form-item>
          <!-- <el-button class="top-btn" type="primary" @click="getExcel()"
            >导出Excel</el-button
          > -->
        </el-form-item>
      </el-form>
    </el-row>
    <el-divider />
    <el-row class="table-row" :gutter="10">
      <el-col :span="16">
        <el-table
          :data="wellInfo"
          border
          style="width: 100%"
          :span-method="objectSpanMethod"
          height="72vh"
        >
          <el-table-column prop="area" label="区域" />
          <el-table-column prop="block" label="区块" />
          <el-table-column prop="oilField" label="油田" />
          <el-table-column prop="wellName" label="井名" />
          <el-table-column prop="casingSize" label="本层套管尺寸in" />
          <el-table-column prop="startDate" label="施工日期" />
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-tabs v-model="activeName" type="card" @tab-click="changeTag">
          <el-tab-pane label="材料消耗统计" name="first">
            <el-table
              :data="materialConsumption"
              border
              style="width: 100%"
              height="68vh"
            >
              <el-table-column prop="materialName" label="固井添加剂（代号）" />
              <el-table-column
                prop="materialDosage"
                label="用量"
                width="100px"
              />
              <el-table-column prop="materialUint" label="单位" width="100px" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="附件消耗统计" name="second">
            <el-table
              :data="accessoryConsumption"
              border
              style="width: 100%"
              height="68vh"
            >
              <el-table-column prop="accessoryName" label="固井附件" />
              <el-table-column
                prop="accessoryDosage"
                label="用量"
                width="100px"
              />
              <el-table-column
                prop="accessoryUnit"
                label="单位"
                width="100px"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Divider, Tabs, TabPane } from 'element-ui'
import {
  GetConsumptionByConditionData,
  GetWorkCompany,
  GetAreaData,
  GetBlockData,
  GetOilField,
  GetWellSpacing,
} from '../../../api/module/dataAnalysis'

export default {
  components: { elDivider: Divider, elTabs: Tabs, elTabPane: TabPane },
  data() {
    return {
      formLabels: {
        workCompany: '作业公司',
        area: '区域',
        block: '区块',
        oilField: '油田',
        wellSpacing: '井别',
        startDate: '施工日期(起始)',
        endDate: '施工日期(结束)',
        workDate: '施工日期',
      },
      filterOptionsRules: {
        workCompany: {
          required: true,
          message: '请选择作业公司',
          trigger: 'change',
        },
        area: { required: true, message: '请选择区域', trigger: 'change' },
        block: { required: true, message: '请选择区块', trigger: 'change' },
      },
      selectStyle: { width: '290px' },
      areaOptions: [],
      blockOptions: [],
      oilFieldOptions: [],
      workCompanyOptions: [],
      wellSpacingOptions: [],
      filterOptions: {},
      wellInfo: [],
      activeName: 'first',
      materialConsumption: [],
      accessoryConsumption: [],
      defaultWorkDate: '',
      startDate: '',
      endDate: '',
      spanArr: [],
      loading: false,
    }
  },
  beforeMount() {
    this.handleGetDefaultDate()
  },
  mounted() {
    this.handleGetWorkCompanyOptions()
    this.handleGetWellSpacingOptions()
  },
  methods: {
    /* 默认查询时间 */
    handleGetDefaultDate() {
      let now = new Date()
      let year = now.getFullYear()
      let month = now.getMonth()
      let day = now.getDate()
      this.startDate = `${year - 5}-${month + 1}-${day}`
      this.endDate = `${year}-${month + 1}-${day}`
    },
    handleGetDefaultWorkDate() {
      this.filterOptions.stratDate = `${this.startDate} 00:00:00`
      this.filterOptions.endDate = `${this.endDate} 23:59:59`
    },
    /* 查询列表数据 */
    handleGetTableData() {
      if (this.startDate || this.endDate) {
        this.handleGetDefaultWorkDate()
      } else {
        delete this.filterOptions.stratDate
        delete this.filterOptions.endDate
      }
      if (
        (this.startDate && this.endDate) ||
        (!this.startDate && !this.endDate)
      ) {
        console.log(this.filterOptions)
        this.loading = !this.loading
        GetConsumptionByConditionData(this.filterOptions)
          .then((res) => {
            console.log(res)
            this.wellInfo = res.data.data.wellInfo
            this.materialConsumption = res.data.data.materialConsumption
            this.accessoryConsumption = res.data.data.accessoryConsumption
            this.getSpanArr(this.wellInfo)
            this.loading = !this.loading
          })
          .catch((e) => {
            this.loading = !this.loading
            this.wellInfo = []
            this.materialConsumption = []
            this.accessoryConsumption = []
            this.$message.error('未查询到列表数据，请检查查询条件！')
          })
      } else {
        this.$message.error('施工日期不能只选一个，请检查！')
      }
    },
    /* 查询筛选条件数据事件 */
    handleGetWorkCompanyOptions() {
      GetWorkCompany()
        .then((res) => {
          this.workCompanyOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    changeWorkCompany() {
      delete this.filterOptions.area
      delete this.filterOptions.block
      this.blockOptions = []
      delete this.filterOptions.oilField
      this.oilFieldOptions = []
      this.handleGetAreaOptions()
    },
    handleGetAreaOptions() {
      GetAreaData(this.filterOptions.workCompany)
        .then((res) => {
          this.areaOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到区域数据！')
        })
    },
    changeArea() {
      delete this.filterOptions.block
      delete this.filterOptions.oilField
      this.oilFieldOptions = []
      this.handleGetBlockOptions()
    },
    handleGetBlockOptions() {
      GetBlockData(this.filterOptions.workCompany, this.filterOptions.area)
        .then((res) => {
          this.blockOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到区块数据！')
        })
    },
    changeBlock() {
      delete this.filterOptions.oilField
      this.handleGetOilFieldOptions()
    },
    handleGetOilFieldOptions() {
      GetOilField(
        this.filterOptions.workCompany,
        this.filterOptions.area,
        this.filterOptions.block
      )
        .then((res) => {
          this.oilFieldOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到油田数据！')
        })
    },
    handleGetWellSpacingOptions() {
      GetWellSpacing()
        .then((res) => {
          this.wellSpacingOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到井别数据！')
        })
    },
    /* 按钮的事件 */
    getTableData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleGetTableData()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getExcel() {
      console.log('excel')
    },
    changeTag(tab, event) {
      console.log(tab, event)
    },
    /* 合并表格 */
    getSpanArr(data) {
      this.spanArr = []
      this.spanArr.push(1)
      let pos = 0
      for (let i = 1; i < data.length; i++) {
        if (data[i].wellName === data[i - 1].wellName) {
          this.spanArr[pos]++
          this.spanArr[i] = 0
        } else {
          this.spanArr[i] = 1
          pos = i
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex in [0, 1, 2, 3]) {
        return {
          rowspan: this.spanArr[rowIndex],
          colspan: this.spanArr[rowIndex] > 0 ? 1 : 0,
        }
      }
    },
  },
}
</script>

<style scoped>
.out-div {
  margin: 0px;
}
/* .select-row {

} */
.el-divider--horizontal {
  margin: -10px 0 10px 0;
}
</style>
